<template>
  <div class="info_item">
      <el-card>
          <div class="date_view"><span>{{item.date}}</span><span>{{item.week}}</span><span>{{item.type}}</span><span>{{item.isWork}}</span></div>
          <div class="date_view1" ><span style="width:60px">欢迎您</span><span style="width:80px" :title="item.name">{{item.name}}</span><span :title="deptName" style="width: 120px;">({{deptName}})</span></div>
          <div class="date_view2"><img src="@/assets/image/cha.png" /><span>您是第</span><span>{{item.count}}</span><span>次使用本系统</span></div>
          <div style="margin-top: 5px;font-size: 10px;"><span style="margin-right: 10px;">上次登录时间:</span><span>{{item.lastLogin}}</span></div>
      </el-card>
  </div>
</template>

<script>
export default {
  name:"InfoItem",
  data() {
    return {
      deptName: null,//this.$store.user.dept.deptName,
    }
  },
  components: {},
  props: {
      item: Object
  },
  created() {
    this.deptName = this.$store.state.user.dept.deptName;
  },
  computed: {},
  methods: {

  }
};
</script>

<style lang="scss" scoped>
    .info_item {
        width: 25rem;
        height: 11.125rem;
    }
    .el-card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .date_view {
        display: flex;
        flex-direction: row;
        align-items: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        span {
            font-size: 1.125rem;
            color: #333;
        }
    }
     .date_view1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.9rem;
        span {
           // font-size: 1.125rem;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        span:nth-child(2) {
            color: rgb(72, 127, 210);
            font-weight: 500;
        }
    }
    .date_view2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 1rem;
        img {
            width: 1.6rem;
            height: 1.6rem;
        }
        span {
          //  font-size: 1.125rem;
            color: #333;
        }
        span:nth-child(2) {
            margin-left: 1rem;
        }
        span:nth-child(3) {
            margin-left: 1rem;
            //font-size: 1.875rem;
            font-weight: bold;
            color: rgb(72, 127, 210);
        }
        span:nth-child(4) {
            margin-left: 1rem;
        }
    }
    span {
        font-family: 微软雅黑;
    }
    
</style>
